/*
  学习目标：Redux-reducer推荐写法
  */

import { createStore } from 'redux';

//  3. 提取初始值为单独的变量
// 👍推荐就叫initState
const initState = {
  count: 0,
  msg: 'React',
};
//  1. 提取reducer函数
function reducer(state = initState, action) {
  console.warn('进入仓库了  ----->  ', action);

  //  2. 使用swtich语句替换if语句
  switch (action.type) {
    case 'add':
      return { ...state, count: state.count + 1 };

    case 'des':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

// 1.  把reducer函数提取为单的函数
// 👍通常, 函数名就叫reducer

//  2. 使用swtich语句替换if语句
// 💥 记得给default分支，写上返回值 state

const store = createStore(reducer);

// console.log('store.getState().count  ----->  ', store.getState().count);

// store.dispatch({ type: 'add' });

// console.log('store.getState().count  ----->  ', store.getState().count);

// store.dispatch({ type: 'des' });

// 1.使用subscribe开启监听仓库
// 💥语法上：const 关闭监听的函数 = store.subscribe（回调函数），回调函数中，可以获取到更新后的值
store.dispatch({ type: 'add' });
store.dispatch({ type: 'add' });
store.dispatch({ type: 'add' });
store.dispatch({ type: 'add' });
store.dispatch({ type: 'add' });
store.dispatch({ type: 'add' });

// 💥subscribe要在开启后，dispatch才能触发，开启前dispatch不触发
const unFn = store.subscribe(() => {
  console.log('store改变了  ----->  ', store.getState());
});

// console.log('unFn  ----->  ', unFn);

store.dispatch({ type: 'des' });

// 2. 关闭监听
// 💥调用unFn就是关闭监听
unFn();
// store.dispatch({ type: 'des' });
// store.dispatch({ type: 'des' });
// store.dispatch({ type: 'des' });
// store.dispatch({ type: 'des' });
// store.dispatch({ type: 'des' });
// store.dispatch({ type: 'des' });
// store.dispatch({ type: 'des' });
